import React from 'react';
import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';

const Data = {
    news: [
        {
            id: 1,
            summary: "西安高温天气001",
            date: '12:04',
            content: 'ccfyyndeMacBook-Pro:ReactLesson ccfyyn$ touch Course12_animation.js'
        },
        {
            id: 2,
            summary: "西安高温天气002",
            date: '13:04',
            content: 'ccfyyndeMacBook-Pro:reactrouter4 ccfyyn$ touch Course13_modal.js'
        }
    ]
}

function findItem(id) {
    return Data.news.filter(function (ne) {
        return ne.id == id;
    })[0];
}

const ListItem = ({match:{params}})=> {
    var new_ = findItem(params.id);
    return (
        <div>
            <h4>{new_.summary}</h4>
            <small>{new_.date}</small>
        </div>
    );
}

const ListItem2 = ({match, new_})=> {
    return (
        <Link to={{pathname:`${match.url}/${new_.id}`, state:{modal:true}}}>
            <h4>{new_.summary}</h4>
            <small>{new_.date}</small>
        </Link>
    );
}

class Lists extends React.Component {

    componentDidMount() {
        console.log('componentDidMount');
    }

    render() {
        const {match} = this.props;
        return <div>
            {Data.news.map(function (e, index) {
                return <ListItem2 match={match} new_={e} key={index}/>
            })}
        </div>
    }
}

const WeatherDetail = ({match:{params}, history})=> {
    var item = findItem(params.id);
    const back = (event)=> {
        event.stopPropagation();
        history.goBack();
    }
    return <div onClick={back} style={styles.modal_root}>{item.content}</div>
}

var styles = {}

styles.modal_root = {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    background: 'rgba(0, 0, 0, 0.15)'
}

class ModalS extends React.Component {

    constructor(props) {
        super(props);
        this.previousLocation = this.props.location;
    }

    componentWillUpdate(nextProps) {
        console.log('componentWillUpdate');
        var {location} = this.props;
        if (nextProps.history.action !== 'POP' && (!location.state || !location.state.modal)) { // push && isModal
            this.previousLocation = this.props.location;
        }
    }

    render() {
        const {location} = this.props
        const isModal = !!(
            location.state &&
            location.state.modal &&
            this.previousLocation !== location // 不是首次渲染。
        )
        console.log(isModal);
        console.log(isModal ? this.previousLocation : location);
        return (
            <div>
                <div><Link to="/test">test...</Link></div>
                <Switch location={isModal ? this.previousLocation : location}>
                    <Route path="/list" exact component={Lists}></Route>
                    <Route path="/test" render={()=>(<div>TestPage</div>)}/>
                    <Route path="/list/:id" component={WeatherDetail}/>
                    <Route path="/" exact render={()=>(<Redirect to="/list"/>)}></Route>
                </Switch>
                {isModal ? <Route path="/list/:id" component={WeatherDetail}/> : null}
            </div>
        )
    }
}

const App = ()=> {
    return <Router basename="abc">
        <div>
            <Switch>
                <Route path="/list" exact component={Lists}></Route>
                <Route path="/list/:id" component={WeatherDetail}/>
                <Route path="/" exact render={
            ()=>{
                return <Redirect to="/list"/>
            }}></Route>

            </Switch>
        </div>
    </Router>
}

const App2 = ()=> {
    return <Router>
        <Route component={ModalS}></Route>
    </Router>
}

export default App2

